<template>
  <view class="container">
    <view class="medical-card">
      <view class="header">
        <image class="avatar" src="../../static/logo.png" />
        <text class="name" v-show="show.name">{{ name }}</text>
        <text class="name" v-show="!show.name">***</text>
        <image
          class="icon"
          src="../../static/logo.png"
          @tap="toggleShow('name')"
        />
        <text class="phone" v-show="show.phone">{{ phone }}</text>
        <text class="phone" v-show="!show.phone">***</text>
        <image
          class="icon"
          src="../../static/logo.png"
          @tap="toggleShow('phone')"
        />
      </view>
      <view class="info-item" v-for="(value, key) in editableFields" :key="key">
        <text class="label">{{ labels[key] }}</text>
        <text class="content" v-if="!edit[key]">{{ value }}</text>
        <u-input
          v-else
          id="`input-${key}`"
          :ref="key"
          type="text"
          v-model:value="editableFields[key]"
          @blur="save(key)"
        />
        <image class="icon" src="../../static/logo.png" @tap="editField(key)" />
      </view>
    </view>
    <view class="emergency-contact">
      <view class="info-item">
        <text class="label">紧急联系人：</text>
        <text class="content" v-if="!edit.emergencyContact">{{
          emergencyContact
        }}</text>
        <u-input
          v-else
          id="`input-${key}`"
          ref="emergencyContact"
          type="text"
          v-model:value="emergencyContact"
          @blur="save('emergencyContact')"
        />
        <image
          class="icon"
          src="../../static/logo.png"
          @tap="editField('emergencyContact')"
        />
      </view>
      <view class="info-item">
        <text class="label">紧急联系方式：</text>
        <text class="content" v-if="!edit.emergencyPhone">{{
          emergencyPhone
        }}</text>
        <u-input
          v-else
          ref="emergencyContact"
          id="`input-${key}`"
          type="text"
          v-model:value="emergencyPhone"
          @blur="save('emergencyPhone')"
        />
        <image
          class="icon"
          src="../../static/logo.png"
          @tap="editField('emergencyPhone')"
        />
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onUpdated, nextTick, watch } from 'vue'

const name = ref('张三')
const phone = ref('12345678910')
const emergencyContact = ref('紧急联系人')
const emergencyPhone = ref('紧急联系电话')
const editableFields = ref({
  bloodType: 'A',
  height: '175 cm',
  weight: '70 kg',
  sex: '男',
  allergy: '无',
  medicalHistory: '无'
  // ... add other fields as needed
})
const edit = ref({
  bloodType: false,
  height: false,
  weight: false,
  sex: false,
  allergy: false,
  medicalHistory: false,
  emergencyContact: false,
  emergencyPhone: false
  // ... add other fields as needed
})
const show = ref({
  name: false,
  phone: false
})
const labels = {
  bloodType: '血型',
  height: '身高',
  weight: '体重',
  sex: '性别',
  allergy: '过敏源',
  medicalHistory: '既往病史'
  // ... add other fields as needed
}
const toggleShow = (field) => {
  show.value[field] = !show.value[field]
}

const editField = (field) => {
  edit.value[field] = true
  // field.focus()
  nextTick(() => {
    // uni.createSelectorQuery().select(`#${field}`).focus().exec()
  })
}

const save = (field) => {
  // Do something to save the edited data to the server or local storage here
  // ...
  edit.value[field] = false
}
const focusField = (key) => {
  nextTick(() => {
    console.log(edit.value[key])
    if (edit.value[key]) {
      const inputElement = document.getElementById(`input-${key}`)
      if (inputElement) inputElement.focus()
    }
  })
}

watch(
  () => {
    edit
  },
  (newVal, oldVal) => {
    for (const key in newVal) {
      if (newVal[key] !== oldVal[key]) {
        focusField(key)
      }
    }
  },
  { deep: true }
)
</script>

<style scoped>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
}
.medical-card,
.emergency-contact {
  width: 80%;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  margin: 20px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
.header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 20px;
}
.name,
.phone {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}
.info-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.label {
  width: 30%;
}
.content {
  flex-grow: 1;
}
input {
  flex-grow: 1;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 5px;
}
.icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
</style>
